/*
 * @Author: jiu yin
 * @Date: 2024-06-21 13:43:24
 * @LastEditTime: 2024-07-02 17:18:59
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \studio-web-admin\src\view\pico\component\Deploy.tsx
 * jiu
 */
import { list_atlas } from "@/api/home";
import Modal_edit from "@/comment/modal_edit";
import { Radio, Space, message } from "antd";
import { useEffect, useState } from "react";
import "./index.scss";
import { socket } from "@/utils/webSocket";

export default function Deploy(props: any) {
	let { isModalOpen, item, reload } = props;

	let [data_list, set_data_list] = useState([] as any);

	useEffect(() => {
		list_atlas({ page: 1, limit: 100 }).then((res: any) => {
			set_data_list(res.data.data);
			let list_index = res.data.data.findIndex((i: any) => i.version == item.version);
			setValue(list_index == -1 ? 0 : list_index);
		});
	}, []);

	const [value, setValue] = useState(0);

	const handleOk = () => {
		send();
		reload();
	};
	//发送-------to 到CodeTable 页 接收
	const send = () => {
		let active_item = data_list[value];
		if (active_item.version && active_item.package_name && item.device_real_sn && active_item.file_url) {
			let params = {
				action: "device/app/upgrade",
				payload: {
					package: active_item.package_name,
					type: "zip",
					url: active_item.file_url,
					version: active_item.version,
					range: item.device_real_sn,
				},
			};
			socket.send(JSON.stringify(params));
			isModalOpen[1](false);
			message.success("部署发送成功");
		} else {
			message.error("部署失败，数据不足");
			console.log(
				"active_item.version:" +
					active_item.version +
					"/active_item.package_name:" +
					active_item.package_name +
					"/item.device_real_sn:" +
					item.device_real_sn +
					"active_item.file_url:" +
					active_item.file_url
			);
		}
	};

	return (
		<Modal_edit title={"选择部署版本"} width={600} isModalOpen={isModalOpen} handleOk={() => handleOk()} okText={"部署"}>
			<section>
				<h3 className="c-#161940 font-700 mt-20px">当前版本</h3>
				<div className="bg-#F7F8FF border-rd-10px p-16px">
					<div className="text-14px">
						<p className=" c-#9697A9 flex">
							<span> 地图名称: &nbsp;</span>

							<span className="c-#161940 flex-1">{item.name}</span>
						</p>

						<div className="flex mt-14px">
							<p className=" c-#9697A9">
								版本号: &nbsp;<span className="c-#161940">V{item.version}</span>
							</p>
							<p className=" c-#9697A9 ml-44px">
								上传时间: &nbsp;<span className="c-#161940">{item.created_at}</span>
							</p>
						</div>
					</div>
				</div>
			</section>
			<section className="mt-20px">
				<h3 className="c-#161940 font-700">可部署版本</h3>
				<Radio.Group
					onChange={e => setValue(e.target.value)}
					value={value}
					className="flex justify-center mt-20px h-480px overflow-y-auto">
					<Space direction="vertical" className="w-97%">
						{data_list.map((i: any, index: number) => (
							<Radio value={index} className="bg-#F7F8FF border-rd-10px p-16px w-100%" key={index}>
								<div className="text-14px">
									<p className=" c-#9697A9 flex">
										<span> 地图名称: &nbsp;</span>
										<span className="c-#161940 flex-1">{i.name}</span>
									</p>

									<div className="flex mt-14px">
										<p className=" c-#9697A9">
											版本号: &nbsp;<span className="c-#161940">V{i.version}</span>
										</p>
										<p className=" c-#9697A9 ml-44px">
											上传时间: &nbsp;<span className="c-#161940">{i.created_at}</span>
										</p>
									</div>
								</div>
							</Radio>
						))}
					</Space>
				</Radio.Group>
			</section>
		</Modal_edit>
	);
}
